<extend name="Public/base"/>

<block name="style">
    <link href="__CSS__/uploadFiles.css?v={:C('CURRENT_FILE_VERSION')}" rel="stylesheet" />
    <!-- <link href="__JS__/menu/css/jquery.contextmenu.css?v={:C('CURRENT_FILE_VERSION')}" rel="stylesheet" />
    <script type="text/javascript" src="__JS__/menu/js/jquery.contextmenu.js"></script> -->
    <style>
    	.page-content,.dialog_bd{
    		padding:inherit !important;
    	}
    
        .uploadify object{
            left: 0px;
        }
        .uploadify-button{
            height: 35px !important;
            line-height: 35px !important;
            background: #16679e !important;
            border: none !important;
        }
        .uploadify-queue{
            width: 360px;
            position: absolute;
            right: 5px;
            z-index: 222;
        }
        .uploadify-queue .cancel{
            background: none;
            height: 16px;
            width: 16px;
            float: right;
            line-height: 16px;
        }
        .uploadify-queue-item .cancel a{
            background: none !important;
        }
        .uploadify-queue .fileName{
            float: left;
        }
        .uploadify-queue-item{
            font: inherit;
            height: 40px;
            line-height: 20px;
        }
        .color_white{
            color: #ffffff;
        }
        
        .img_pick{
        	padding:16px 0px;
        }

    </style>
</block>

<block name="body">
    <input type="hidden" name="groupid" id="groupid" value="1">
    <div class="dialog_wrp img_dialog_wrp ui-draggable">
        <div class="dialog">
            <div class="dialog_bd">
                <div class="img_pick_panel inner_container_box side_l cell_layout">
                    <div class="inner_side">
                        <div class="group_list">
                            <div class="inner_menu_box">
                                <dl class="inner_menu js_group">
                                    <volist name="groups" id="vo">
                                        <dd id="js_group_{$vo['module_name']}" 
	                                        class="inner_menu_item js_groupitem" 
	                                        data-groupid="{$vo['id']}" data-type="{$vo['module_name']}">
                                        <a href="javascript:;" class="inner_menu_link" title="{$vo['title']}"
                                             onclick="return false" data-groupid="{$vo['id']}">
                                            <strong data-groupid="{$vo['id']}">{$vo['title']}</strong>
                                       </a>
                                    </dd>
                                    </volist>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="inner_main">
                        <div class="img_pick_area" id="img_pick_area">
                            <div class="sub_title_bar in_dialog">
                            	<form action="" style="float:left;margin-top:10px;display:none;">
                            		<input type="text" placeholder="输入图片名称查找" value="" name="name" id="name" style="float:left;" />
                            		<button type="button" class="btn btn-default btn-primary" onclick="_loadding_pic_list();" style="float:left;margin-left: 10px;">查 找</button>
                            	</form>
                                <!-- tips  -->
                                <div class="bubble_tips bubble_right warn r">
                                    <div class="bubble_tips_inner">
                                       <if condition=" I('get.isUploadPic') eq '1' " >
                                       {:C('CAN_UPLOAD_FILE_TIP')}
                                       <else/>
                                       {:C('CAN_UPLOAD_FILE_TIP2')}
                                       </if>
                                    </div>
                                    <i class="bubble_tips_arrow out"></i>
                                    <i class="bubble_tips_arrow in"></i>
                                </div>
                                <!-- 上传按钮 -->
                                <div class="upload_box r align_right">
                                    <span class="upload_area webuploader-container">
                                        <input type="file" id="upload_a" style="display: none;">
                                        <!--<a id="upload_a"-->
                                            <!--class="btn btn_primary js_imageupload webuploader-pick"-->
                                            <!--data-groupid="">本地上传</a>-->
                                    </span>
                                </div>
                            </div>
                            <div>
                                <div class="img_pick">
                                    <i class="icon_loading_small white js_loading" style="display: none;"></i>
                                    <ul id="file_list_ul" class="group js_list img_list" style="display: block;">
                                    </ul>
                                </div>
                                <div class="js_pagebar" style="display: block;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dialog_ft">
                <span class="dialog_ft_desc">
                    <span>已选</span>
                    <span class="js_selected" id="selected_count">0</span>
                    <span>个，可选<font id="can_selected_count">{$lists|count}</font>个</span>
                </span>

                <span class="btn btn_disabled btn_input js_btn_p " id="ok_sure" >
                    <button type="button" class="js_btn color_white" disabled onclick="okSelected();" style="padding: 0px 0px;" data-index="0">确定</button>
                </span>

                <span class="btn btn_default btn_input js_btn_p" id="cancel_sure">
                    <button type="button" class="js_btn" data-index="1" style="padding: 0px 0px;" 
                    		onclick="closeLayerDialog();">取消</button>
                </span>

                 <span class="btn btn_disabled btn_warn btn_input js_btn_p" id="delete_sure">
                    <button type="button" disabled class="js_btn" data-index="1" style="padding: 0px 0px;"
                            onclick="delPics();">彻底删除</button>
                </span>

                <input type="hidden" value="" id="selected_pics" />

            </div>

        </div>
    </div>
    
</block>

<block name="script">
    <!--  弹窗插件引用 update by nirunfa 2015-12-20  -->
	<script src="__STATIC__/layer/layer.js"></script>

	<!-- artdialog  -->
	<include file="Public:artdialog" />


	<!-- 上传图片插件  -->
    <link href="__STATIC__/uploadify/uploadify.css?v={:C('CURRENT_FILE_VERSION')}" rel="stylesheet" />
    <script src="__STATIC__/uploadify/jquery.uploadify.min.js?v={:C('CURRENT_FILE_VERSION')}" ></script>
    <script>
    
    	/*允许上传文件类型*/
    	var isUploadPic = "{$isUploadPic}"
    	var fileTypeExts = '*.jpg;*.gif;*.png;*.jpeg;*.zip;*.rar;*.7z;*.doc;*.docx;*.txt;*.xlsx';
    	if(isUploadPic=='1'){
    		fileTypeExts = '*.jpg;*.gif;*.png;*.jpeg';
    	}
    		
    		
        var module_name ="{$module_name}";
        var org_module_name ="{:I('get.module_name')}";
        var selected_count=0;
        var reg_partten=/^jpg|jpeg|png|gif|bmp&/;
        var groupid="{$groupid}";
        if(groupid=='0'){
        	groupid=1;
        }
        
        /* 是否已经加载所有的数据流 */
        /* 当前页数 */
        var page = 1,
        	is_all = 0/* 是否已经加载所有的数据 */,
        	index ='abc' ;
        
        var atta_id_str='';

        /*单选状态开启标志*/
        var only_choose_one='{$only_choose_one}';

        $(function(){

        	  /*选中左侧菜单*/
            $('#js_group_'+module_name).addClass('selected');
        	  
        	  
            //显示加载,隐藏文件列表
            $('.js_loading').show();
            $('#file_list_ul').hide();
            //点击进来加载
            _loadding_pic_list();

            //左侧菜单点击事件绑定
            $('.js_group dd').click(function(){
                $(this).addClass('selected').siblings().removeClass('selected');
                var this_type=$(this).attr('data-type');
                //设置上传模块的模块名称
                module_name=this_type;
                $("#groupid").val($(this).attr("data-groupid"));
                groupid=$(this).attr("data-groupid");
                //显示加载,隐藏文件列表
                $('.js_loading').show();
                $('#file_list_ul').hide();
                /*初始化按钮金庸效果*/
                initSelectPic();
                page =1;
                _loadding_pic_list();
                
            });

            //上传文件
            /* 初始化上传插件 */
            /* ;*.zip;*.rar;*.tar;*.gz;*.7z;*.doc;*.docx;*.txt;*.xml;*.xlsx */
            $("#upload_a").uploadify({
                "height"          : 30,
                "swf"             : "__STATIC__/uploadify/uploadify.swf?v={:C('CURRENT_FILE_VERSION')}",
                "fileObjName"     : "download",
                "buttonText"      : "上传文件",
                "uploader"        : "{:U('Attachment/uploadFile',array('session_id'=>session_id()))}",
                "width"           : 120,
                'removeTimeout'	  : 1,
                'fileTypeExts'	  : fileTypeExts,
                'fileSizeLimit'   :'5MB',
                'formData' :{'module_name':module_name,'groupid':groupid,'isUploadPic':isUploadPic},
                'onUploadStart' : function(file) {
                    $("#upload_a").uploadify("settings", "formData", {'module_name':module_name,'groupid':groupid,'isUploadPic':isUploadPic,'org_module_name':org_module_name});
                },
                "onUploadSuccess" : uploadPicture,
                'onFallback' : function() {
                    alert('未检测到兼容版本的Flash.');
                }
            });

//            setTimeout(function(){
                $('#upload_a').show();
//            },500);

              //监控当前滚动高度
              $('#img_pick_area').scroll(function(){
                	//获取滚动了的高度
                    var scltop = $(this).scrollTop();
                    //获取div的高度
                    var scrollHeight = $(this)[0].scrollHeight;
                    var this_height = $(this).height();
                    
                    //console.log('scltop:'+scltop+',this_height:'+this_height+',scrollHeight:'+scrollHeight);

                    if ( (scrollHeight - 20) <= (parseInt(this_height)+parseInt(scltop)) && is_all == 0 ){
                    	
                    	index = layer.load(0, {shade:[0.8, '#000000']}); //0代表加载的风格，支持0-2
                    	
                    	page++;
                    	_loadding_pic_list(1);
                    }
            });
	
        });

        /* 关闭layer窗口 */
        function closeLayerDialog(){
            /* var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(index); */
        	art.dialog.close();
        }
       
        /*加载列表*/
        function _loadding_pic_list(scroll_load){
        	//改变数量支
            var _val=$('#can_selected_count').html();
        	
            $.ajax({
                url:"{:U('loaddingFileListByType')}",
                data:{'module_name':module_name,'groupid':groupid,'isUploadPic':isUploadPic,'name':$.trim($('#name').val()),'page':page},
                dataType:'json',
                type:'POST',
                success:function(data){
                    var li_html='';
                    $(data.lists).each(function(i,item){
                        li_html+='<li class="img_item js_imageitem" data-url="h" ';
                        li_html+='data-id="'+item.id+'"';
                        li_html+=' id="pic_li_'+item.id+'"';
                        li_html+='data-format="'+item.file_extension_name+'" onclick="selectPic(this);" >';
                        li_html+='<label class="frm_checkbox_label img_item_bd">';
                        /*如果是图片类就显示图片,不是显示默认图片*/
                        if(reg_partten.test(item.file_extension_name)){
                            li_html+='<img file_name="'+item.file_name+'" src="'+(item.file_path)+'" alt="'+(item.attachment_name)+'" class="pic">';
                        }else{
                            li_html+='<img src="'+item.file_extension_name+'.png" alt="'+(item.attachment_name)+'" class="pic">';
                        }
                        li_html+='<span class="lbl_content ttips"'+
                                'title="'+(item.attachment_name)+'">'+(item.attachment_name)+'</span>';
                        /* 查看原图 */
                        li_html+='<span class="lbl_content ttips"'+
                                'title="查看原图" style="border-top:1px solid #ddd;padding:0 12px;">'+
                        		'<a href="'+(item.org_file_name)+'" target="_blank" style="display:block;text-align:center;" >查看原图</a>'+
                        		'</span>';
                        li_html+='<div class="selected_mask">' +
                                '<div class="selected_mask_inner"></div>' +
                                '<div class="selected_mask_icon"></div>' +
                                '</div>' +
                                '</label>' +
                                '</li>';
                                
                        /* 设置可选数量  */
                        _val=parseInt(_val)+1;
                    });
                    
                    /* 关闭layer */
                    if( index != 'abc' ){
                    	layer.close(index);
                    }  
                    
                    
                    if( typeof(scroll_load) === 'undefined' ){
                    	
						if(li_html.length===0){
                            li_html='<div class="empty_tips">该分组下没有数据记录</div>';
                        }
							
                    	$('#file_list_ul').html(li_html);
                        //隐藏加载,显示文件列表
                        $('.js_loading').hide();
                        $('#file_list_ul').show();
                        
                    }else{                        	
                    	
                    	$('#file_list_ul').append(li_html);
                    	var dataCount = data.lists.length;
                    	
                    }
						
					is_all = data.is_all;

                    //改变数量支
                    $('#can_selected_count').html(_val);                    

                },
                error:function(){
                    $('#file_list_ul').html('<div class="empty_tips">请求服务器失败</div>');
                    $('#file_list_ul').show();
                },
                complete:function(){

                }
            });
        }

        
        /*
         init pic li
         * */
        function initSelectPic(){
            selected_count=0;
            $('#selected_count').html(selected_count);
            $('#ok_sure').addClass('btn_disabled').find('button').attr('disabled','disabled');
        }

        //上传文件
        /* 初始化上传插件 */
        function uploadPicture(file, data){
            var data = eval("("+data+")");
            var src = '';
            if(data.status){
            	/* 缩略图 */
                var file_path=data.file_path;
                var file_extension_name=data.attachment_name;
                /* 原始图片 */
                var org_file_name=data.org_file_name;
                var file_name = data.file_name;
                /* '{$attachment_upload["orginPath"]}'+ */
                var li_html='<li class="img_item js_imageitem" data-url="h" ';
                    li_html+='data-id="'+data.id+'"';
                    li_html+=' id="pic_li_'+data.id+'"';
                    li_html+=' data-format="'+data.file_extension_name+'" onclick="selectPic(this);" >';
                    li_html+='<label class="frm_checkbox_label img_item_bd">';
                    /*如果是图片类就显示图片,不是显示默认图片*/
                    if(reg_partten.test(data.file_extension_name)){
                        li_html+='<img file_name="'+file_name+'" src="'+file_path+'" alt="" class="pic">';
                    }else{
                        li_html+='<img src="/Public/Admin/images/oa/'+data.file_extension_name+'.png" alt="" class="pic">';
                    }
                    li_html+='<span class="lbl_content ttips"'+
                            'title="'+file_extension_name+'">'+file_extension_name+'</span>';
                    /* 查看原图 */
                    li_html+='<span class="lbl_content ttips"'+
                            'title="查看原图" style="border-top:1px solid #ddd;padding:0 12px;">'+
                    		'<a href="'+org_file_name+'" target="_blank" style="display:block;text-align:center;" >查看原图</a>'+
                    		'</span>';
                    li_html+='<div class="selected_mask">' +
                            '<div class="selected_mask_inner"></div>' +
                            '<div class="selected_mask_icon"></div>' +
                            '</div>' +
                            '</label>' +
                            '</li>';
                $('#file_list_ul').find('div.empty_tips').remove();
                /*$('#file_list_ul').append(li_html);*/
                /* 插入在第一个元素前面 */
                if($('#file_list_ul').find('li.js_imageitem').length > 0){
                	$('#file_list_ul').find('li.js_imageitem').eq(0).before(li_html);
                }else{
                	$('#file_list_ul').append(li_html);
                }
                

                //改变数量支
                var _val=$('#can_selected_count').html();
                _val=parseInt(_val)+1;
                $('#can_selected_count').html(_val);

            } else {
                showvfmsg(0,data.info,2000);
            }
        }

        /*
       	点击选中上传的图片
         */
        function selectPic(li_obj){
            if(typeof  only_choose_one !=='undefined' && only_choose_one.length!==0 ){
                /*单选图片的单独处理*/
                if($(li_obj).find('label').hasClass('selected')){
                    $(li_obj).find('label').removeClass('selected');
                    $('#ok_sure').addClass('btn_disabled').find('button').attr('disabled','disabled');
                    /*禁用删除按钮 2015-10-31*/
                    $('#delete_sure').addClass('btn_disabled').find('button').attr('disabled','disabled');

                    selected_count=0;
                    $('#selected_count').html(0);
                }else{
                    $(li_obj).find('label').addClass('selected');
                    $('#ok_sure').removeClass('btn_disabled').find('button').removeAttr('disabled');
                    /*取消其他li的选中状态*/
                    $(li_obj).siblings().find('label').removeClass('selected');
                    selected_count=1;
                    $('#selected_count').html(1);

                    /*启动删除按钮  2015-10-31*/
                    $('#delete_sure').removeClass('btn_disabled').find('button').removeAttr('disabled');
                }
                return;
            }
            if($(li_obj).find('label').hasClass('selected')){
                $(li_obj).find('label').removeClass('selected');
                var _selected_length=$('#file_list_ul').find('label.selected').length;
                if(_selected_length===0){
                    $('#ok_sure').addClass('btn_disabled').find('button').attr('disabled','disabled');
                    /*禁用删除按钮 2015-10-31*/
                    $('#delete_sure').addClass('btn_disabled').find('button').attr('disabled','disabled');
                }
                $('#selected_count').html(--selected_count);
            }else{
                $(li_obj).find('label').addClass('selected');
                $('#ok_sure').removeClass('btn_disabled').find('button').removeAttr('disabled');
                $('#selected_count').html(++selected_count);

                /*启动删除按钮  2015-10-31*/
                $('#delete_sure').removeClass('btn_disabled').find('button').removeAttr('disabled');
            }
        }

        /**
         * 点击确定按钮
         */
        function okSelected(){

            var _selected_options = $('#file_list_ul label.selected');
            var _selected_length=_selected_options.length;
            var _selected_arry =new Array();
            for(var i=0;i<_selected_length;i++){
                var data_id=$(_selected_options[i]).parent().attr('data-id');
                var data_src=$(_selected_options[i]).find('img').attr('src');
                var _arry=new Array();
                _arry['id']=data_id;
                _arry['src']=data_src;

                _selected_arry[i]=_arry;
            }

            var parent=    art.dialog.opener;
            if( module_name == 'goods' && only_choose_one.length != 0 ){
            	parent._getSelectedPicOne(_selected_arry,_selected_length,only_choose_one,'{:I("request.element_id")}');
            }else{
            	parent._getSelectedPic(_selected_arry,_selected_length,only_choose_one,'{:I("request.element_id")}');
            }            
            art.dialog.close();
            /* parent._getSelectedPic(_selected_arry,_selected_length,only_choose_one,'{:I("request.element_id")}'); */
            <if condition="$_REQUEST['module_name'] eq 'goods' ">
            	/*parent._getSelectedPic(_selected_arry,_selected_length,only_choose_one,'{:I("request.element_id")}');*/
            	<else/>
            	/*parent._getSelectedPicSimple(_selected_arry,_selected_length,only_choose_one,'{:I("request.element_id")}');*/
            </if>
            /* closeLayerDialog(); */
        }

        /*
        点击删除图片
        delete_sure
        * */
       function delPics(){

           var _selected_options = $('#file_list_ul label.selected');
           var _selected_length=_selected_options.length;
           if(_selected_length===0){
               return;
           }

           var id_str='';
           for(var i=0;i<_selected_length;i++){
               var data_id=$(_selected_options[i]).parent().attr('data-id');
               id_str+=data_id+',';
           }

           commonDialog('您确定删除吗?','delPics','confirmDelPics',id_str);

       }

       function confirmDelPics(id_str){
           $.ajax({
               'url':"{:U('delPics')}",
               'data':{'id':id_str},
               'dataType':'json',
               'type':'POST',
               success:function(data){
                   if(data.status!==-1){
                       showvfmsg(data.status, data.info, 1500);
                       if(data.status==1){
                    	   forDelPic(id_str);
                           /*_loadding_pic_list();*/
                       }
                   }else{
                       /*这里需要弹出提示有哪些图片关联了*/
                       showvfmsg(0, data.info, 1500);

                       var content='<ul style="list-style-type: decimal !important;">';
                       $(data.data).each(function(i,item){
                           content+='<li> 图片:<font style="font-weight: bold;">'+item.file_name+'</font>已被产品:<font style="font-weight: bold;">'+item.product_name+'</font>使用，不能删除!</li>';

                           atta_id_str+=item.atta_id+',';
                       });
                       content+="</ul>";

                       //询问框
                       layer.confirm(content, {
                    	   icon: 0,
                    	   area: ['600px'],
                           btn: ['强制删除','取消'] //按钮
                       }, function(){
                           /*layer.msg('的确很重要', {icon: 1});*/
                           layer.closeAll();

                           commonDialog('您确定强制删除吗?删除后产品图片显示可能错误.','confirm_del','confirmDelPic',atta_id_str,'确定',false);
                           console.log('ok_consume');
                           if(data.status==1){
                        	   forDelPic(id_str);
                               /*_loadding_pic_list();*/
                           }

                       }, function(){
                           layer.closeAll();
                       });

                   }

               },error:function(){
                   showvfmsg(0,'请求服务器失败',1500);
               },complete:function(){

               }
           });
       }

       function commonDialog(title,id,function_name,param,okval,drag){
           if(typeof  okval === 'undefined'){
               okval='确定';
           }
           if(typeof  drag === 'undefined'){
               drag=true;
           }

           //询问框
           layer.confirm(title, {
        	   icon: 3,
               btn: [okval,'取消'] //按钮
           }, function(){
               /*layer.msg('的确很重要', {icon: 1});*/
               layer.closeAll();

               window[function_name](param);
           }, function(){
               layer.closeAll();
           });

       }

       function confirmDelPic(atta_id_str){
           $.ajax({
               'url':"{:U('delPics')}",
               'data':{'id':atta_id_str,'is_confirm':'1'},
               'dataType':'json',
               'type':'POST',
               success:function(data){
                   showvfmsg(data.status, data.info, 1500);
                   if(data.status==1){
                	   forDelPic(atta_id_str);
                       /*_loadding_pic_list();*/
                   }

               },error:function(){
                   showvfmsg(0,'请求服务器失败',1500);
               },complete:function(){

               }
           });
       }

       function _page_load_userlist_datalist(){
           window.location.reload();
       }

       	
       /* 循环删除图片 */
       function forDelPic(idStr){
       	var id_str_arry = idStr.split(',');
       	for( var i=0; i<id_str_arry.length; i++ ){
       		$('#pic_li_'+id_str_arry[i]).remove();
       	}   
       }


    </script>
    <script>
        //初始化右键菜单
        /*$(function() {
            $('.inner_menu_item').contextPopup({
                title: '操作的菜单',
                items: [
                    {label:'添加分组',  action:function(target) {menuAdd(target); } },
                    {label:'修改分组', action:function(target) { menuUpdate(target); } },
                    {label:'删除分组', action:function(target) { menuDelect(target); } }
                ]
            });
        });*/

        //添加分组
        function menuAdd(target){
            _esOpendialogmini('{:U('Attachment/addGroup')}','添加分组');
        }

        //更新分组
        function menuUpdate(target){
            var datagrid=target.target.getAttribute("data-groupid");
            _esOpendialogmini('{:U('Attachment/updateGroup')}&id='+datagrid,'修改分组');
        }
        //删除分组
        function menuDelect(target){
            var datagrid=target.target.getAttribute("data-groupid");

        }

        function _page_load_userlist_datalist(){
            window.location.reload();
        }
    </script>
</block>